<!--
* @description 
* @author zywu
* @date 2020/12/17 15:53:43
!-->
<template>
  <div class="animation-text font14 colorYellow">
    <div class="holder" v-html="insertText"></div>
    <div class="performer" v-html="currentText"></div>
  </div>
</template>

<script>
export default {
  name:'AnimationText',
  props:{
    text:{
      type:String,
      default:''
    }
  },
  data () {
    return {
      currentText:'',
      insertText:''
    }
  },
  watch:{
    text(val){
      this.insertText=val
      this.textNum=0
      this.textRun()
    }
  },
  methods:{
    textRun() {
			this.currentText = this.insertText.slice(0, this.textNum)
			var lastText = this.insertText.slice(this.textNum)
			if (lastText.indexOf('</br>') === 0) {
				this.textNum = this.textNum + 6
			} else {
				this.textNum++
			}
			if (++this.textNum <= this.insertText.length + 1) setTimeout(this.textRun, 80)
		},
  }
}
</script>

<style lang="scss">
.animation-text{
  position: relative;
  .holder{
    visibility: hidden;
  }
  .performer{
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>